<template>
	<view class="start cu-custom">
		<flipcountdown :numHeight="numHeight" :rollingNumber="rollingNumber" :total="total" ref="flipcountdown"></flipcountdown>
		<view style="align-self: center;">
			<view class="button" @click="stop">停止洗澡</view>
		</view>
	</view>
</template>

<script>
	import flipcountdown from '../../components/flipcountdown.vue';
	export default {
		components: {
			flipcountdown
		},
		data() {
			return {
				numHeight: 42,
				rollingNumber: 1,
				total: 10,
				time: 0,
				regionId: 1,
				type: 1,
				washId: 1
			}
		},
		onLoad({
			regionId,
			type
		}) {
			this.regionId = regionId;
			this.type = type;
			this.addWash()
		},
		computed: {
			orderData() {
				return this.$store.getters['getOrderData']
			}
		},
		methods: {
			stop() {
				this.$comm.successToShow('洗澡已结束', () => {
					this.time = this.$refs.flipcountdown.stop()
					let param = {
						regionId: this.regionId,
						washTime: this.time,
						type: this.type,
						washId: this.washId
					}
					if (this.type == 2) {
						param.orderId = this.$store.getters['getOrderData'].orderId
					}
					this.$api.updateWash(param).then(res => {
						if (res.code) {
							this.$store.commit('setRegionState', {
								regionId: this.regionId,
								regionState: '空闲'
							})
							this.$store.commit('setOrderData', {})
							uni.showModal({
								title: '支付',
								content: `需支付元${res.data.washMon}`,
								showCancel: false,
								success: (info) => {
									if (info.confirm) {
										this.$api.payment({
											Money: res.data.washMon
										}).then(res => {
											if (res.code) {
												this.$comm.switchTabTo('/pages/index/index')
											}
										})
									}
								}
							});
						}
					})
				})
			},
			addWash() {
				let param = {
					regionId: this.regionId,
					washTime: this.time,
					type: this.type
				}
				if (this.type == 2) {
					param.orderId = this.$store.getters['getOrderData'].orderId
				}
				this.$api.addWash(param).then(res => {
					if (res.code) {
						this.washId = res.data.insertId
						if (this.type == 1) {
							this.$store.commit('setRegionState', {
								regionId: this.regionId,
								regionState: '使用中'
							})
						} else if (this.type == 2) {
							this.$store.commit('setRegionState', {
								regionId: this.regionId,
								regionState: '使用中'
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.start>>>.xdsoft_flipcountdown>.xdsoft_digit {
		width: 30px;
		height: 41px;
		background-image: url(~@/static/icon/img.png);
		transition-property: background-position;
		transition-duration: 0.1s;
	}

	.start>>>.xdsoft_flipcountdown>.xdsoft_digit.xdsoft_dot {
		width: 15px;
	}

	.start>>>.xdsoft_flipcountdown>.xdsoft_digit.xdsoft_space {
		/* width: 15px; */
		background-position: 0 -463px;
	}

	.start {
		padding-top: var(--status-bar-height);
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		height: 100vh;
	}

	.button {
		width: 171px;
		height: 44px;
		color: rgba(255, 255, 255, 1);
		background-color: rgba(64, 169, 255, 1);
		border-radius: 20px;
		font-size: 20px;
		line-height: 150%;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto;
		bottom: 200upx;
	}
</style>
